<template>
  <!-- 重设密码 -->
  <layout title="注册" background="#fff">
    <view>
      <view class="login_title"> 设置密码 </view>
      <view class="list">
        <view class="list-call">
          <view
            class="iconfont icon-lock"
            style="font-size: 22px; color: #7b7b7b"
          ></view>
          <input
            class="u-input"
            type="text"
            v-model="password"
            maxlength="32"
            placeholder="请输入密码"
            :password="!showPassword"
          />
          <image
            class="u-icon-right"
            :src="
              '/static/aidex/login/eye_' +
              (showPassword ? 'open' : 'close') +
              '.png'
            "
            @click="showPass()"
          ></image>
        </view>
        <view class="list-call">
          <view
            class="iconfont icon-lock"
            style="font-size: 22px; color: #7b7b7b"
          ></view>
          <input
            class="u-input"
            type="text"
            v-model="password1"
            maxlength="32"
            placeholder="请再次输入密码"
            :password="!showPassword"
          />
          <image
            class="u-icon-right"
            :src="
              '/static/aidex/login/eye_' +
              (showPassword ? 'open' : 'close') +
              '.png'
            "
            @click="showPass()"
          ></image>
        </view>
        <div style="padding: 15rpx 0; font-size: 24rpx; color: #b5b5b5">
          密码长度6~32位，可包含数字和字母，不可使用特殊符号
        </div>
      </view>
      <view class="default-button" @click="submit('1')"><text>确定</text></view>
    </view>
  </layout>
</template>
<script>
export default {
  data() {
    return {
      navigationBarStyle: {
        background: "",
        color: "black",
        iconText: "", //导航栏文字
      },
      codeDisabled: false,
      loadTime: 60,
      timer: "",
      phoneNo: "",
      code: "",
      password: "",
      password1: "",
      loginType: "currentPhone",
      showPassword: false,
      remember: true,
      isValidCodeLogin: false,
      validCode: "",
      imgValidCodeSrc: null,
      openId: "",
    };
  },
  onLoad(option) {
    this.phoneNo = option.phoneNo;
    this.code = option.code;
    this.openId = option.openId;
  },
  onShow() {
    this.loadTime = 60;
    this.codeDisabled = true;
  },
  methods: {
    showPass() {
      this.showPassword = !this.showPassword;
    },
    submit() {
      const _this = this;
      if (this.password.length < 6) {
        this.$u.toast("请输入长度6-32位的密码");
        return;
      }
      if (this.password != this.password1) {
        this.$u.toast("2次输入密码不一致");
        return;
      }
      this.$u.api
        .registerSetPassword(
          Object.assign(
            {
              tel: this.phoneNo,
              code: this.code,
              password: this.password.split(""),
            },
            this.openId ? { openId: this.openId } : {}
          )
        )
        .then((res) => {
          if (res.code == "200") {
            _this.$u.toast("注册登录成功");
            _this.$u.api.getUserMes({ ignoreLogin: true }).then((res) => {
              if (res.code == 200) {
                _this.$u.vuex("vuex_user", res.data);
              }
              uni.navigateTo({
                url: "/pages/sys/home/index",
              });
            });
          } else {
            this.$u.toast(res.message);
          }
        });
    },
    wxLogin(res) {
      this.$u.toast("微信登录");
    },
    qqLogin() {
      this.$u.toast("QQ 登录");
    },
  },
};
</script>
<style lang="scss">
@import "index.scss";

.logo {
  width: 80%;
  font-size: 64rpx;
  color: #5473e8;
  margin: 80rpx auto 80rpx auto;
}
.list-call-icon {
  color: #ff0000;
}
.currentPhone-box {
  text-align: center;
  padding: 40rpx 80rpx;
  .number-text {
    color: #000000;
    font-size: 60rpx;
  }
  .other-text {
    color: #999999;
    font-size: 26rpx;
    padding: 20rpx 0;
  }
  .u-btn {
    margin: 30rpx auto;
  }
  .u-hairline-border {
    border: 1px solid #fff;
  }
}

.register {
  display: inline-block;
  color: #5473e8;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  float: left;
  margin-top: 6rpx;
}
.register-link {
  float: left;
  padding: 0 16rpx;
}
.reg-link {
  display: inline-block;
  color: #5473e8;
}
.oauth2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0rpx 100rpx 30rpx;

  image {
    height: 80rpx;
    width: 80rpx;
  }
}
.u-tabs {
  padding: 0 70rpx;
}
</style>
